<template>
  <div id="app">
    <!-- 设置视图 -->
    <div class="view">
      <router-view />
    </div>
    <!-- 设置底部导航栏 -->
    <div class="tabList">
      <div 
      @click="navigator(0)"
      :class="index == 0 ? 'list-item-active' : 'list-item'">
        <img v-show="index != 0" src="@/assets/icon-home.png" />
        <img v-show="index == 0" src="@/assets/icon-home-selected.png" />
        <span>首页</span>
      </div>
      <div 
      @click="navigator(1)"
      :class="index == 1 ? 'list-item-active' : 'list-item'">
        <img v-show="index != 1" src="@/assets/icon-category.png" />
        <img v-show="index == 1" src="@/assets/icon-category-selected.png" />
        <span>分类</span>
      </div>
      <div 
      @click="navigator(2)"
      :class="index == 2 ? 'list-item-active' : 'list-item'">
        <img v-show="index != 2" src="@/assets/icon-star.png" />
        <img v-show="index == 2" src="@/assets/icon-star-selected.png" />
        <span>米圈</span>
      </div>
      <div 
      @click="navigator(3)"
      :class="index == 3 ? 'list-item-active' : 'list-item'">
        <img v-show="index != 3" src="@/assets/icon-cart.png" />
        <img v-show="index == 3" src="@/assets/icon-cart-selected.png" />
        <span>购物车</span>
      </div>
      <div 
      @click="navigator(4)"
      :class="index == 4 ? 'list-item-active' : 'list-item'">
        <img v-show="index != 4" src="@/assets/icon-user.png" />
        <img v-show="index == 4" src="@/assets/icon-user-selected.png" />
        <span>我的</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      index: 0
    };
  },
  watch:{
    // 监听 $route.path变化
    "$route.path"(nVal){
      // console.log(nVal);
      // 判断nVal的值  让index做出相应的变化
      if(nVal == '/'){
        this.index = 0
      }else if(nVal == '/category'){
        this.index = 1
      }else if(nVal == '/star'){
        this.index = 2
      }else if(nVal == '/cart'){
        this.index = 3
      }else {
        this.index = 4
      }
    }
  },
  created(){
    console.log(
      this.$route
      /* 
        this.$route 
          包含了路由的信息
          path: 是路由地址
          name: 是路由的名字
          query(params): 是路由后面携带参数
      */
    )
  },
  methods: {
    navigator(index){
    /* 
      形参index 和 this.index  相等
      不再向后执行
    */
   if(this.index == index){
    return
   }
      /* 
        this.$router
        包含了，使用router实例 可以跳转路由的方式
        相当于 router-link的 to属性
        push(options)
          options 对象形式

          path: '跳转的路由',
          name: '跳转的路由名称'
      */
      // this.$router.push({
      //   path: '/'
      // })
      // 默认根路由
      let path = '/';
      if(index == 0){
        path = '/'
      }else if(index == 1){
        path = '/category'
      }else if(index == 2){
        path = '/star'
      }else if(index == 3){
        path = '/cart'
      }else{
        path = '/myselef'
      }
      this.$router.push({
        path
      })
      // push(可以是一个字符串路径 如果没有/ 默认会找name是当前名字的路由)
      // this.$router.push('myselef')
      // this.$router.push('/myselef')
      // push(一个对象)
      // this.$router.push({
      //   // 跳转的路由地址
      //   // path: '/star'
      // })
      this.index = index;
    }
  }
};
</script>
<style lang="scss">
.view {
  height: calc(100vh - 47px);
}
.tabList {
  width: 100%;
  height: 47px;
  background-color: #fff;
  box-sizing: border-box;
  position: fixed;
  border-top: 1px solid #eee;
  bottom: 0;
  left: 0;
  display: flex;
  .list-item,
  .list-item-active {
    width: 20%;
    height: 47px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-decoration: none;
    img {
      width: 25px;
    }
    span {
      font-size: 13px;
      color: #999;
    }
  }
  .list-item-active {
    span {
      color: #ff6700;
    }
  }
}
</style>
